<template>
<div>
    <!-- 轮播图 -->
    <div>
 <el-carousel indicator-position="outside">
    <el-carousel-item  v-for="(image, index) in images" :key="index">
        <img :src="image.url" class="imgg">   
    </el-carousel-item>
  </el-carousel>
    </div>
    <!-- 照片 -->
   <div class="demo-image">
    <h1>销售爆款</h1>
    <div v-for="(image, index) in images2" :key="index" class="block">
      <el-image style="width: 100px; height: 100px" :src="image.url" />
    </div>
  </div>
</div>

  
</template>
<script>
export default {
    data(){
        return{
        images: [
        { url:  require('../images/1.jpg'), title: 'Image 1'  },
        { url: require('../images/2.jpg'), title: 'Image 2' },
        { url: require('../images/3.jpg'), title: 'Image 3' },
         { url: require('../images/4.jpg'), title: 'Image 4' },
       
      ],
      images2:[
        {
            url:  'https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/428_428_9F0B82BD57F2C5853D61868D5486347Bmp.png', title: 'Image 1'
        },
        {
            url:  'https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/displayProduct/10086764961298/428_428_a_web2E3D503582498B5805E98D3088965F80.png', title: 'Image 1'
        },
        {
            url:  'https://res1.vmallres.com/pimages/uomcdn/CN/pms/202209/gbom/6941487279920/428_428_5004852797AFCEEB1950E17E92A9E44Bmp_tds.png', title: 'Image 1'
        },
        {
            url:  'https://res2.vmallres.com/pimages//uomcdn/CN/pms/202303/gbom/6941487294152/428_428_4F83A80967BB0E75D9643A408A76F0D6mp.png', title: 'Image 1'
        },
        {
            url:  'https://res8.vmallres.com/pimages//uomcdn/CN/pms/202212/gbom/6941487277988/428_428_F17861761B9A06A33CFBC8D6AA61482Fmp_tds.png', title: 'Image 1'
        },
        
      ]
           

        }
    }

   
}
</script>


<style scoped>
.imgg{
    width: 100%;
    height: 100%;
}
.demo-image{
    margin-top: 30px;
}
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>